<template>
  <zx-container>
    <template #zx-primary-search>
      <zx-search-form
        v-model:formData="searchParams"
        :formItems="formItems"
        v-model:page="pages.page"
        @search="searchTable"
      />
    </template>
    <template #zx-primary-header>
      <TableTitle title="FB广告资源申请处理列表">
        <el-button
          type="primary"
          icon="Download"
          :loading="exportLoading"
          @click="exportData"
        >
          导出
          <span v-if="exportLoading">（{{ exportProgress }}%）</span>
        </el-button>
      </TableTitle>
      <TableTab
        v-model="activeTab"
        :tabList="tabList"
        :activeTab="activeTab"
        :total="total"
      />
    </template>
    <template #zx-primary-container>
      <zx-table
        ref="tableRef"
        height="100%"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        minWidth="150"
      ></zx-table>
      <zx-pagination
        v-model:page="pages.page"
        v-model:size="pages.per_page"
        :total="total"
        @change="getTableData"
      />
    </template>
  </zx-container>
  <DetailDialog
    :activeRow="activeRow"
    :activeTab="activeTab"
    v-model:show="showDetailDialog"
    @success="searchTable"
  />
</template>

<script setup>
import { useTable } from 'zhixin-ui';
import {
  platformApplicationFb_accountList,
  platformApplicationExport
} from '@/api/resources.js';
import { formItems, columns, searchParams, injectData } from './tableConst';
import TableTitle from '@/components/TableTitle';
import TableTab from '@/components/TableTab';
import DetailDialog from './DetailDialog.vue';
import { PAGES, INIT_ORANIZE_PARAMS, APPLY_STATUS_LIST } from '@/utils/const';
import {
  platformApplication_typeAll,
  platformFb_account_typeAll,
  platformSiteTypeAll
} from '@/api/system';
import { exportExcel } from '@/utils';

const route = useRoute();

const props = defineProps({
  activeOranize: {
    type: Object,
    default: () => {}
  }
});

// 表格hooks
const tableRef = ref();
const { loading, tableData, pages, total, getTableData } = useTable(
  platformApplicationFb_accountList,
  {
    tableRef,
    searchParams,
    autorun: false,
    formItems,
    pages: PAGES()
  }
);

// tab
const activeTab = ref(1);
const tabList = reactive(APPLY_STATUS_LIST);
watch(activeTab, () => {
  total.value = 0;
  initTable();
});
function initSearchParams() {
  pages.value.page = 1;
  searchParams.status = activeTab.value;
  INIT_ORANIZE_PARAMS(searchParams, props.activeOranize);
}
function searchTable(type) {
  if (type === 'reset') initSearchParams();
  getTableData();
}
function initTable(keep) {
  if (!keep) initSearchParams();
  getTableData();
}

// 详情
const showDetailDialog = ref(false);
// 详情点击事件
const activeRow = ref({});
function handleDetail(row) {
  activeRow.value = row;
  showDetailDialog.value = true;
}

// 导出
// 以【.xlsx】excel文档格式导出；
// 文档命名：站点资源申请处理【时间戳】
const exportLoading = ref(false);
const exportProgress = ref(0);
function exportData() {
  // 判断是否选择申请类型
  if (!searchParams.application_type) {
    return $msg.warning('请先选择具体申请类型，再点击导出');
  }
  exportExcel({
    loading: exportLoading,
    api: platformApplicationExport,
    params: searchParams,
    formItems,
    progress: exportProgress
  });
}

// 获取所有查询下拉
function getOptions() {
  // 申请类型
  platformApplication_typeAll().then(res => {
    const resData = res.data || [];
    formItems.sqlx_map.options = [
      { name: '全部', id: undefined, code: undefined }
    ];
    for (let i = resData.length - 1; i >= 0; i--) {
      const item = resData[i];
      // 拿到属于FB广告资源的二级申请类型名称
      if (item.code === 'fb_resource_application') {
        item.childs?.forEach(it => {
          formItems.sqlx_map.options.push({
            name: it.name,
            id: it.id,
            code: it.code
          });
        });
      }
    }
    // 处理查询条件
    const type_code = route.query?.type_code;
    if (!type_code) return;
    const info = formItems.sqlx_map.options.find(
      item => item.code === type_code
    );
    if (!info) return searchTable();
    searchParams.sqlx_map = info.id;
    formItems.sqlx_map.change(info.id);
    searchTable();
  });

  // 个号类型 公司级别
  platformFb_account_typeAll().then(res => {
    const resData = res.data || [];
    formItems.fb_account_type.options = [
      { label: '全部', value: undefined },
      ...resData.map(item => {
        return { label: item.name, value: item.id };
      })
    ];
  });

  // FB广告账户 公司级别
  platformSiteTypeAll({ type: 'fb_adv_account_type' }).then(res => {
    const resData = res.data || [];
    formItems.fb_advertisement_account_type.options = [
      { label: '全部', value: undefined },
      ...resData.map(item => {
        return { label: item.name, value: item.id };
      })
    ];
  });
}

defineExpose({ initTable, getOptions });
injectData({ handleDetail, activeTab });
</script>

<style lang="scss" scoped></style>
